<template>
	<div class="app-creat-template">
		<!--新建模板step2-->
		<el-card shadow="never">
			
			<el-form :model="formData" ref="RuleFrom"  label-width="100px" :rules="Rules" style="margin:20px;">
				
				<el-form-item  label="代码分支：" prop="branch" v-if="branchList">
	  			<baseSelect  
						ref="baseSelect"
						:defaultValue="formData.branch"
						:optionList="branchList"
						placeholder="请选择代码分支"
						@change="changeBranch"></baseSelect>
	  		</el-form-item>
	  		
	  		<el-form-item  label="应用类型：" prop="appType">
	  			<yingyongTypeSelect
					  :type="0" 
						ref="yingyongTypeSelect"
						:defaultValue="formData.appType" 
						@change="changeAppType"></yingyongTypeSelect>
	  		</el-form-item>
	  		
	  		<el-form-item  
	  			v-if="deployType==1"
	  			label="镜像仓库：" prop="imageRepository">
	  			<jingxiangcangkuSelect  
						ref="jingxiangcangkuSelect"
						:defaultValue="formData.imageRepository" 
						@change="changeImageRepository"></jingxiangcangkuSelect>
	  		</el-form-item>
	  		
	  		<el-form-item  label="应用名称：" prop="name">
	  			<baseInput style="width:250px" ref="nameInput"  :defaultValue="formData.name" placeholder="请输入应用名称" @change="changeAppName"></baseInput>
	  		</el-form-item>
	  		
	  		<el-form-item  :label="version" prop="appVersion">
	  			<baseInput style="width:250px" ref="nameInput"  :defaultValue="formData.appVersion" placeholder="请输入版本" @change="changeAppVersion"></baseInput>
	  		</el-form-item>
	  		
	  		<el-form-item  label="描述信息：" prop="description">
	  			<appTextarea width="350px" @change="changeDESC"></appTextarea>
	  		</el-form-item>
	  		
			</el-form>	
				
			<el-row>
				<el-col :span="12">
					<el-button  @click="goPrev"  size="small">上一步</el-button>
				</el-col>
				<el-col :span="12" align="right">
					<el-button  @click="submit" type="primary" size="small">下一步</el-button>
				</el-col>
			</el-row>
			
		</el-card>
	</div>
</template>

<script>
import baseInput from "@/view/components/input/input";
import baseSelect from "@/view/components/select/select";
import yingyongTypeSelect from "@/view/components/select/yingyongTypeSelect";
import jingxiangcangkuSelect from "@/view/components/select/jingxiangcangkuSelect";
import appTextarea from "@/view/components/textarea/textArea";
import {validate_NumEn} from "@/utils/validate"

export default {
	props: [
		"deployType"
	],
	components: {
		baseInput,
		baseSelect,
		appTextarea,
		yingyongTypeSelect,
		jingxiangcangkuSelect,
	},
	data() {
		return {
			version:'镜像版本：',
			branchList : [],
			formData:{
				branch : "", // 代码分支
				appType : "", // 应用类型
				imageRepository : "", // 镜像仓库
				name : "", // 应用名称
				appVersion : "", // 镜像版本
				description : "",
			},
			Rules : {
				branch : [],
				appType : [{ required: true, message: '请选择应用类型', trigger: 'change' }],
				imageRepository : [{ required: true, message: '请选择镜像仓库', trigger: 'change' }],
				name : [
				{ required: true, validator: (rule, value, callback) => {
            if (!value) {
              callback('请输入应用名称')
            } else if (!validate_NumEn(value)) {
              callback('请按照正确的格式填写：英文、数字、下划线、中划线')
            } else {
              callback()
            }
          }, trigger: 'blur' }
				],
				appVersion : [{ required: true, message: '请输入版本', trigger: 'blur' }],
			}
		}
	},
	mounted() {
		if(this.deployType == '1'){
			this.version = '镜像版本：'
		}else{
			this.version = '应用版本：'
		}
	},
	methods: {
		init(formData){
			this.initBranchList(formData.branchList);
			let typeConfigs = {
				"GIT" : "02",
				"SVN" : "02",
				"FILE" : "01",
			}
			// this.$refs.yingyongTypeSelect.getData(
			// 	typeConfigs[formData.repositoryType]
			// );
		},
		initBranchList(arr){
			let _arr = []
			if(arr&&arr.length){
				arr.forEach(el=>{
					_arr.push({
						value : el,
						label : el,
					})
				})
				// 清空所选分支
				if(arr.indexOf(this.formData.branch)==-1){
					this.changeBranch(null,"")
				}
				this.branchList = _arr ;
			}else{
				this.branchList = null ;
			}
			if(_arr&&_arr.length){
				this.Rules.branch = [{ required: true, message: '请选择代码分支', trigger: 'change' }]
			}else{
				delete this.Rules.branch ;
			}
		},
		changeBranch(name,v){
			console.log(name,v)
			this.formData.branch = v ;
		},
		changeAppType(name,v){
			console.log(name,v)
			this.formData.appType = v ;
		},
		changeImageRepository(name,v){
			console.log(name,v)
			this.formData.imageRepository = v ;
		},
		changeAppName(name,v){
			console.log(name,v)
			this.formData.name = v ;
		},
		changeAppVersion(name,v){
			console.log(name,v)
			this.formData.appVersion = v ;
		},
		changeDESC(name,v){
			console.log(name,v)
			this.formData.description = v ;
		},
		
		goPrev(){
			this.$emit("goPrev");
		},
		goNext(){
			this.$emit("submit",this.formData);
		},
		submit(){
			this.$refs.RuleFrom.validate((valid) => {
        if (valid) {
          this.goNext()
        }
      });
		}
	}
}
</script>

<style >
.el-input .el-input__suffix .el-icon-circle-close::before{
   	display:none !important;
}
.el-input .el-input__suffix .el-icon-circle-check::before{
   	display:none !important;
}
</style>